import { h } from 'preact';
import { observer } from 'mobx-react';
import _ from 'lodash-es';

// import Rect from '../basic-shape/Rect';
import { getShapeComponent, getShapeAnchor } from '../shapes';
import Behavior from './behavior/Behavior';
import Archor from './Archor';

function BaseNode({ nodeModel }) {

  const { x, y, width, height, fill } = nodeModel;

  const handleClick = (e) => {
    // nodeModel.x += 10;
    // nodeModel.y += 10;
  }

  function handleDrag(e) {
    console.log(e);
  }

  function getText() {
    const attrs = {
      x: nodeModel.x + nodeModel.width / 2,
      y: nodeModel.y + nodeModel.height / 2,
    };

    // return (
    //   <text {...attrs} >CLICK ME!</text>
    // );
  }

  function getArchorsPosition() {
    return getShapeAnchor(nodeModel);;
  }

  function getArchors() {
    return _.map(getArchorsPosition(), xy =>
      <Archor {...xy} />
    );
  }

  function getNodeShape() {
    const component = getShapeComponent(nodeModel.type);
    return h(component, {
      ...nodeModel
    })
  }

  return (
    <Behavior model={nodeModel} >
      <g
        onClick={handleClick}
      >
        {getNodeShape()}

        {getArchors()}

        {getText()}
      </g>
    </Behavior>
  );

}

export default observer(BaseNode);
